<template>
	<div class="table_com">
		<div class="flex_box">
			<div class="tab_box" :style="`--index: ${active}`">
				<div class="item_box" :class="index == active ? 'active' : ''" v-for="(item,index) in list" :key="index"
					@click="handleItem(index)">
					{{item}}
				</div>
			</div>
			<div class="but_box" v-if="active == 3">
				<el-popover placement="bottom" width="100" trigger="click" :visible-arrow="false" popper-class="tick tick2"
					v-model="hasRoi">
					<el-button slot="reference">{{roiList[activeRoi]}} <i
							class="el-icon-arrow-down el-icon--right"></i></el-button>
					<div class="coin_item" :class="activeRoi == index ? 'active' : ''" v-for="(item,index) in roiList"
						:key="index" @click="handleRoi(index)">
						<!-- <i class="el-icon-check" v-if="activeRoi == index"></i> -->
						{{item}}
					</div>
				</el-popover>
				<el-popover placement="bottom" width="100" trigger="click" :visible-arrow="false" popper-class="tick tick2"
					v-model="hasDay">
					<el-button slot="reference">{{dayList[activeDay].name}} <i
							class="el-icon-arrow-down el-icon--right"></i></el-button>
					<div class="time_item" :class="activeDay == index ? 'active' : ''" v-for="(item,index) in dayList"
						:key="index" @click="handleDay(index)">
						<!-- <i class="el-icon-check" v-if="activeDay == index"></i> -->
						<span>{{item.name}}</span>
					</div>
				</el-popover>
			</div>
		</div>

		<div class="table_box">
			<div v-if="active == 0 || active == 1">
				<el-table :data="active == 0 ? activeIngData : closedData " style="width: 100%"
					header-row-class-name="header_class" row-class-name="row_class" stripe v-loading="loading"
					element-loading-background="rgba(0, 0, 0, 0.8)">
					<el-table-column prop="date" :label="$t('home.pair')" min-width="120">
						<template slot-scope="scope">
							<div class="item-a0">
								<div class="img_box">
									<img
										:src="scope.row.order ? scope.row.order.currency_match.base_currency.logo : scope.row.currency_match.base_currency.logo" />
									<img :src="scope.row.order ? scope.row.order.currency.logo : scope.row.currency.logo" />
								</div>
								{{ scope.row.order ? scope.row.order.symbol_name : scope.row.symbol_name }}
								<img
									:src="scope.row.type == 1 ? require('@/assets/images/home/zhang.png') : require('@/assets/images/home/die.png')"
									class="zhang" />
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" :label="$t('home.currency')" min-width="100" align="center">
						<template slot-scope="scope">
							USDT
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.amount')" min-width="80" align="center">
						<template slot-scope="scope">
							{{scope.row.amount}}
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.open')" min-width="100" align="center">
						<template slot-scope="scope">
							{{scope.row.open_price}}
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.close')" key="close" min-width="100" align="center"
						v-if="active == 1">
						<template slot-scope="scope">
							{{scope.row.end_price}}
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.yield')" key="YIELD" min-width="60" align="center">
						<template slot-scope="scope">
							{{scope.row.profit_ratio}}%
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.profit')" key="PROFIT" min-width="60" align="center"
						v-if="active == 0">
						<template slot-scope="scope">
							<p :style="`color: ${scope.row.profit > 0 ? '#2ECC71' : '#FF5449'};`">
								{{scope.row.profit}}
							</p>
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.time')" key="TIME" min-width="80" align="right"
						v-if="active == 0">
						<template slot-scope="scope">
							<div style="line-height: normal;font-size: 14px;">
								00:{{scope.row.remain_milli_seconds >= 10 ? scope.row.remain_milli_seconds : `0${scope.row.remain_milli_seconds}`}}
								<div style="width: 72px; margin-left: auto;">
									<el-progress :percentage="(scope.row.remain_milli_seconds / 15) * 100" :show-text="false"
										:stroke-width="4" color="#137EFE" define-back-color="#202D5C"></el-progress>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.profit')" key="PROFIT" min-width="60" align="right" v-else>
						<template slot-scope="scope">
							<p :style="`color: ${scope.row.profit > 0 ? '#2ECC71' : '#FF5449'};`">
								{{scope.row.profit}}
							</p>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div v-else-if="active == 2">
				<el-table :data="tableData" style="width: 100%" header-row-class-name="header_class" row-class-name="row_class"
					stripe v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
					<el-table-column prop="date" :label="$t('home.player')" min-width="120">
						<template slot-scope="scope">
							<div class="user_header">
								<img :src="scope.row.avatar" class="header" />
								{{scope.row.nickname}}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="date" :label="$t('home.pair')" min-width="120" align="center">
						<template slot-scope="scope">
							<div class="item-a0" style="justify-content: center;">
								<div class="img_box">
									<img :src="scope.row.currency_match.base_currency.logo" />
									<img :src="scope.row.currency.logo" />
								</div>
								{{scope.row.symbol_name}}
								<img
									:src="scope.row.type == 1 ? require('@/assets/images/home/zhang.png') : require('@/assets/images/home/die.png')"
									class="zhang" />
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" :label="$t('home.currency')" min-width="100" align="center">
						<template slot-scope="scope">
							USDT
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.amount')" min-width="80" align="center">
						<template slot-scope="scope">
							{{scope.row.amount}}
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.open')" min-width="100" align="center">
						<template slot-scope="scope">
							{{scope.row.open_price}}
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.close')" key="CLOSE" min-width="100" align="center">
						<template slot-scope="scope">
							{{scope.row.end_price}}
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.yield')" key="YIELD" min-width="60" align="center">
						<template slot-scope="scope">
							{{scope.row.profit_ratio}}%
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.profit')" key="PROFIT" min-width="60" align="right">
						<template slot-scope="scope">
							<!-- {{scope.row.profit}} -->
							<p :style="`color: ${scope.row.profit > 0 ? '#2ECC71' : '#FF5449'};`">{{scope.row.profit}}</p>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div v-else-if="active == 3">
				<!-- <div class="but_box">
					<el-popover placement="bottom" width="100" trigger="click" :visible-arrow="false" popper-class="tick tick2"
						v-model="hasRoi">
						<el-button slot="reference">{{roiList[activeRoi]}} <i
								class="el-icon-arrow-down el-icon--right"></i></el-button>
						<div class="coin_item" :class="activeRoi == index ? 'active' : ''" v-for="(item,index) in roiList"
							:key="index" @click="handleRoi(index)">
							<i class="el-icon-check" v-if="activeRoi == index"></i>
							{{item}}
						</div>
					</el-popover>
					<el-popover placement="bottom" width="100" trigger="click" :visible-arrow="false" popper-class="tick tick2"
						v-model="hasDay">
						<el-button slot="reference">{{dayList[activeDay].name}} <i
								class="el-icon-arrow-down el-icon--right"></i></el-button>
						<div class="time_item" :class="activeDay == index ? 'active' : ''" v-for="(item,index) in dayList"
							:key="index" @click="handleDay(index)">
							<i class="el-icon-check" v-if="activeDay == index"></i>
							<span>{{item.name}}</span>
						</div>
					</el-popover>
				</div> -->
				<el-table :data="tableData" style="width: 100%" header-row-class-name="header_class" row-class-name="row_class"
					stripe v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
					<el-table-column prop="date" :label="$t('home.player')" min-width="120">
						<template slot-scope="scope">
							<div class="user_header">
								<img :src="scope.row.avatar" class="header" />
								{{scope.row.nickname}}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.trades')" key="TRADES" min-width="80" align="center">
						<template slot-scope="scope">
							{{scope.row.num}}
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.tradesWins')" key="TRADES WINS" min-width="120"
						align="center">
						<template slot-scope="scope">
							{{scope.row.profit_num}}
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="$t('home.ROI')" key="ROI" min-width="80" align="center">
						<template slot-scope="scope">
							{{scope.row.profit_ratio}}%
						</template>
					</el-table-column>
					<el-table-column prop="address" :label="`${$t('home.PROFIT')}(U)`" key="PROFIT(U)" min-width="100"
						align="right">
						<template slot-scope="scope">
							<p :style="`color: ${scope.row.total_profit > 0 ? '#2ECC71' : '#FF5449'};`">{{scope.row.total_profit}}</p>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		microtradeLists,
		microtradeRankingList
	} from '@/api/home'
	export default {
		props: {},
		components: {},
		data() {
			return {
				hasDay: false,
				hasRoi: false,
				tableNone: false,
				loading: false,
				active: 2,
				activeDay: 0,
				activeRoi: 0,
				// list: ['ACTIVE BETS', 'CLOSED BETS', 'PUBLIC BETS', 'LEADERBOARD'],
				tableData: [],
				activeIngData: [], // 进行中的
				closedData: [], // 关闭的
				roiList: ['PNL', 'ROI'],
				// dayList: ['Day', 'Week', 'Month'],
			}
		},
		computed: {
			...mapState(['timeDown', 'newMyDownOrder', 'matches']),
			dayList() {
				return [{
					name: this.$t('home.day'),
					id: 'day'
				}, {
					name: this.$t('home.week'),
					id: 'week'
				}, {
					name: this.$t('home.month'),
					id: 'month'
				}]
			},
			list() {
				return [this.$t('home.activeBets'), this.$t('home.closeBets'), this.$t('home.publicBets'), this.$t(
					'home.leaderboard'), ]
			}
		},
		watch: {
			timeDown(val, oldVal) {
				// console.log('val', val);
				if (this.activeIngData && this.activeIngData.length > 0) {
					this.activeIngData.map((item, index) => {
						if (item.remain_milli_seconds <= 0) {
							this.$nextTick(() => {
								this.activeIngData.splice(index, 1)
								this.page = 1;
								// this.getCloseData()
							})
							if (this.active == 1) {
								this.page = 1
								this.getCloseData()
							}
							this.$store.dispatch('getBalance')
							this.$store.commit('closeMyOrderDom', item)
							// console.log('倒计时结束的item', item);
						} else {
							item.remain_milli_seconds--
						}
					})
				}
			},
			newMyDownOrder(val) {
				if (val && val.uid) {
					// console.log('val', val);
					this.pushActiveIngTable(val)
				}
			},
		},
		mounted() {
			this.getCloseData()
		},
		methods: {
			// addScroll() {
			// 	this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollFunc);
			// 	this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollFunc);
			// },
			// scrollFunc(res) {
			// 	const height = res.target;
			// 	const clientHeight = height.clientHeight;
			// 	const scrollTop = height.scrollTop;
			// 	const scrollHeight = height.scrollHeight;
			// 	if (clientHeight + scrollTop === scrollHeight) {
			// 		if (this.tableNone || this.loading) return
			// 		this.page++
			// 		this.getCloseData()
			// 	}
			// },
			async getList() {
				const res = await microtradeLists({
					match_id: this.matches.id,
					is_public: 0, // 是否是公共 1是 0当前用户
					status: 1,
					limit: 20,
					page: this.page,
				})
				console.log('res', res);
				if (res && res.code == 1) {
					this.activeIngData = res.data.data
				}
			},
			async getCloseData() {
				if (this.loading) return
				this.loading = true;
				const res = await microtradeLists({
					match_id: this.matches.id,
					is_public: this.active == 1 ? 0 : 1, // 是否是公共 1是 0当前用户
					status: 3,
					limit: 20,
					page: this.page,
				}).catch(err => this.loading = false)
				// console.log('res', res, {
				// 	match_id: this.matches.id,
				// 	is_public: this.active == 1 ? 0 : 1, // 是否是公共 1是 0当前用户
				// 	status: 3,
				// 	limit: 20,
				// 	page: this.page,
				// });
				if (res && res.code == 1) {
					if (this.active == 1) {
						this.closedData = res.data.data
					} else {
						// console.log('ress', res.data);
						this.tableData = res.data.data
					}
				}
				this.loading = false
				// console.log('res', res, this.tableData);
			},
			async getRanking() {
				if (this.loading) return
				this.loading = true;
				const res = await microtradeRankingList({
					time_type: this.dayList[this.activeDay].id,
					sort: this.roiList[this.activeRoi],
				}).catch(err => this.loading = false)
				// console.log('ressss', res);
				if (res && res.code == 1) {
					this.tableData = [];
					this.tableData = res.data
				}
				this.loading = false
			},
			pushActiveIngTable(val) {
				this.activeIngData.push(val)
			},
			handleItem(index) {
				if (this.loading) return
				this.page = 1;
				this.active = index;
				if (index == 1 || index == 2) {
					this.getCloseData()
				} else if (index == 3) {
					this.getRanking()
				}
			},
			async handleDay(index) {
				this.activeDay = index
				await this.getRanking()
				this.hasDay = false
			},
			async handleRoi(index) {
				this.activeRoi = index
				await this.getRanking()
				this.hasRoi = false
			}
		}
	}
</script>

<style scoped lang="less">
	.table_com {
		.flex_box {
			display: flex;
			align-items: center;
			margin-bottom: 12px;

			.tab_box {
				position: relative;
				display: flex;
				align-items: center;
				border: 1px solid #353F4C;
				padding: 6px;
				border-radius: 16px;
				font-size: 10px;
				color: #A4A8AB;
				min-width: 535px;
				margin-right: 30px;

				.item_box {
					position: relative;
					z-index: 1;
					flex: 1;
					height: 40px;
					line-height: 40px;
					border-radius: 12px;
					font-weight: bold;
					cursor: pointer;
					transition: all .3s;
				}

				.active {
					// background-color: #137EFE;
					color: #fff;
				}
				
				&::after {
					content: ' ';
					position: absolute;
					z-index: 0;
					height: 40px;
					background-color: #137EFE;
					width: calc(25% - 4px);
					border-radius: 12px;
					transition: all .3s;
					transform: translateX(calc(var(--index) * 100%));
				}
			}

			.but_box {
				display: flex;

				::v-deep .el-button {
					min-width: 100px;
					height: 40px;
					padding: 10px;
					font-size: 12px;
					color: #fff;
					margin: 4px;
					background-color: #212A36;
					border: 0;
					border-radius: 12px;
				}
			}
		}


		.table_box {
			width: 100%;


			::v-deep .el-table--scrollable-x .el-table__body-wrapper {
				&::-webkit-scrollbar {
					display: none;
				}
			}

			::v-deep .el-table td:first-child {
				border-radius: 10px 0 0 10px;
			}

			::v-deep .el-table td:last-child {
				border-radius: 0 10px 10px 0;

				.cell {
					padding-right: 12px !important;
				}
			}

			.el-table {
				background-color: transparent;

				&::before {
					background-color: transparent
				}
			}

			::v-deep .header_class {
				background-color: transparent;



				th.el-table__cell {
					padding: 0;
					background-color: transparent;
					border-bottom: none;
					font-size: 12px;
					color: #fff;

					.cell {
						line-height: 20px;
						padding-left: 5px;
						padding-right: 5px;
					}
				}

			}

			::v-deep .row_class {
				background-color: transparent;

				&:hover {
					td.el-table__cell {
						background-color: transparent;
					}
				}

				td.el-table__cell {
					padding: 0;
					font-size: 12px;
					border-bottom: none;
					color: #fff;

					.cell {
						// height: 40px;
						// padding: 8px 0;
						line-height: 40px;
						padding-left: 5px;
						padding-right: 5px;
						white-space: nowrap;
					}
				}

				&.el-table__row--striped {
					td.el-table__cell {
						background: #1B232E;
					}
				}
			}

			.user_header {
				display: flex;
				align-items: center;

				.header {
					width: 24px;
					height: 24px;
					border-radius: 6px;
					margin-right: 5px;
				}
			}

			.item-a0 {
				display: flex;
				align-items: center;
				justify-content: start;
				white-space: nowrap;

				.img_box {
					display: flex;

					img {
						position: relative;
						z-index: 2;
						width: 20px;
						border-radius: 50%;
					}

					img+img {
						margin-left: -10px;
						z-index: 1;
						margin-right: 5px;
					}
				}

				.zhang {
					width: 10px;
					margin-left: 10px;
				}
			}


		}
	}
</style>